<!--
 * @Description: 收货地址添加
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-30 09:11:19
 * @FilePath: /yuxiuproweb/src/views/mes/wm/warehouseLocation/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="500px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属仓库" prop="warehouseName">
            <el-select
              style="width: 100%"
              v-model="form.warehouseId"
              filterable
              placeholder="请选择所属仓库"
              remote
              reserve-keyword
              :remote-method="getWarehouseList"
              @change="handleLoactionChange"
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.warehouseId"
                :label="item.warehouseName"
                :value="item.warehouseId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="货位编码" prop="areaCcode">
            <el-input v-model="form.areaCode" placeholder="请输入货位编码" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="货位名称" prop="areaName">
            <el-input v-model="form.areaName" placeholder="请输入货位名称" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积" prop="area">
            <el-input-number
              :min="0"
              :step="1"
              :percision="2"
              v-model="form.area"
              placeholder="请输入面积"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="enableFlag">
            <el-switch
              v-model="form.enableFlag"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getWarehouseLocationItem,
  addWarehouseLocation,
  updateWarehouseLocation,
} from "@/api/mes/wm/warehouseLocation";
import { listWarehouse } from "@/api/mes/wm/warehouse";
export default {
  components: {},
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单参数
      form: {
        areaName: "",
        areaCode: "",
        area: "0",
        warehouseName: "",
        locationId: "",
        warehouseId: "",
        enableFlag: 1,
        remark: "",
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      warehouseList: [], //客户信息
    };
  },
  computed: {
    title() {
      return {
        add: "添加货位",
        edit: "修改货位",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
    this.getWarehouseList();
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      // console.log(this.data);
      getWarehouseLocationItem(this.data.areaId).then((res) => {
        this.form = res.data;
      });
    },

    /** 提交按钮 */
    submitForm() {
      console.log("提交", this.form);
      // 获取省市区名称
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!!this.form.areaId) {
            updateWarehouseLocation(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addWarehouseLocation(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
    // 查询仓库信息
    getWarehouseList(clientName = "") {
      listWarehouse({
        pageNum: 1,
        pageSize: 100,
        clientName,
      }).then(({ rows }) => {
        this.warehouseList = rows;
      });
    },
    // 修改仓库
    handleLoactionChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
